<template>
    <el-form :model="user" label-width="100px">
        <el-form-item label="账号" prop="loginAct">
            <el-input v-model="user.loginAct" type="text" />
        </el-form-item>
        <el-form-item label="密码" prop="loginPwd">
            <el-input v-model="user.loginPwd" type="password" />
        </el-form-item>

        <el-form-item label="姓名" prop="name">
            <el-input v-model="user.name" type="text" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
            <el-input v-model="user.phone" type="text" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
            <el-input v-model="user.email" type="text" />
        </el-form-item>
        <el-form-item label="账号是否未过期">
            <el-select v-model="user.accountNoExpired" placeholder="请选择">
                <el-option v-for="item in options" :label="item.label" :value="item.value" :key="item.value" />
            </el-select>
        </el-form-item>

        <el-form-item label="凭证是否未过期">
            <el-select v-model="user.credentialsNoExpired" placeholder="请选择">
                <el-option v-for="item in options" :label="item.label" :value="item.value" :key="item.value" />
            </el-select>
        </el-form-item>

        <el-form-item label="账号是否未锁定" prop="accountNoLocked">
            <el-select v-model="user.accountNoLocked" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </el-form-item>

        <el-form-item label="账号是否已启用" prop="accountEnabled">
            <el-select v-model="user.accountEnabled" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="userSubmit">提交</el-button>
            <el-button type="primary" plain @click="goBack">返回</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router'
import { onMounted, ref } from 'vue'
import { doPost, doGet, doPut } from '../http/httpRequest'
import { showMessage } from '@/util/message'



//定义数组对象，账号是否可用
const options = [
    {
        value: 1,
        label: '是'
    },
    {
        value: 0,
        label: '否'
    }
]

const router = useRouter()
//返回
const goBack = () => {
    router.push({ name: 'userList' })
}

//表单对象
const user = ref({})

//提交表单
const userSubmit = () => {
    //将表单对象放入到formData中
    let formData = new FormData()
    //循环
    for (let prop in user.value) {
        formData.append(prop, user.value[prop])
    }

    //判断是修改还是添加
    if (user.value.id > 0) {
        //修改
        doPut('/api/user',formData).then(resp => {
            if(resp.data.code == 200){
                //显示成功提示
                showMessage('修改用户成功', 'success')
                //调整到用户列表页面
                router.push('/dashboard/user')
            }else{
                //显示失败提示
                showMessage('修改用户失败', 'error')
            }
        })
    } else {
        //添加
        doPost('/api/user', formData).then(resp => {
            if (resp.data.code == 200) {
                //显示成功提示
                showMessage('添加用户成功', 'success')
                //调整到用户列表页面
                router.push('/dashboard/user')
            } else {
                //显示失败提示
                showMessage('添加用户失败', 'error')
            }
        })
    }


}


onMounted(() => {
    //获取路由参数中的userId
    let userId = useRoute().params.userId
    //调用查询用户明细信息方法
    if (userId) {
        loadUser(userId)
    }
})

//查询用户明细信息
const loadUser = id => {
    doGet('/api/user/' + id).then(resp => {
        if (resp.data.code == 200) {
            //将查询到的用户信息赋值给表单对象
            user.value = resp.data.info
        } else {
            //显示失败提示
            showMessage('查询用户失败', 'error')
        }
    })
}
</script>

<style scoped></style>